<template>
  <div>
    <Affix :offset="32">
      <Card class="search-condition m-b-sm">
        <Row>
          <span>赛事名称：</span>
          <Input v-model="pageModel.eventsName" placeholder="请输入" clearable style="width: 150px" />
          <span>赛事类型：</span>
          <dict code="ZGX_SSDJ" model="pageModel.kindCode" :value="pageModel.kindCode" @click="getVal" style="width:150px;"></dict> <span>提交时间：</span>
          <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.startTime"></DatePicker>
          <DatePicker type="date" placeholder="请选择" style="width: 120px;margin-right:10px" v-model="pageModel.endTime"></DatePicker>
          <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
          <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
        </Row>
      </Card>
    </Affix>
    <Card>
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
      <Modal v-model="reviewVisible" :mask-closable="false" :closable="false" title="审核通过" @on-ok="review">
        <p>是否确认此赛事通过审核？</p>
        <div slot="footer">
          <Button @click="reviewVisible=false;">取消</Button>
          <Button @click="review" class="m-l-md" type="primary">确认</Button>
        </div>

      </Modal>
      <Modal v-model="rejectVisible" width='800' :mask-closable="false" :closable="false" title="驳回">
        <Card>
          <Row>
            <Col span="17" offset="3">
            <Form ref="model" :model="model" :rules="rules" inline :label-width="100">
              <Row>
                <Col>
                <FormItem prop="verifyReason" style="width:100%;" label="驳回原因">
                  <dict model="model.verifyReason" style="width:100%;" :value="model.verifyReason" @click="getVal" code="ZGX_BHYY"></dict>
                </FormItem>
                </Col>
              </Row>
              <Row>
                <Col>
                <FormItem prop="verifyExplain" style="width:100%;" label="驳回意见">
                  <Input v-model="model.verifyExplain" type="textarea" :rows="4" placeholder="请输入" />
                </FormItem>
                </Col>
              </Row>
            </Form>
            </Col>
          </Row>

        </Card>
        <div slot="footer">
          <Button @click="cancel">取消</Button>
          <Button @click="reject" class="m-l-md" type="primary">确认</Button>
        </div>
      </Modal>
    </Card>
  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/game-verify";
import { getDict } from "@/api/configure";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      reviewVisible: false,
      rejectVisible: false,
      total: 0,
      pageModel: {},
      page: {
        pageSize: this.$config.PAGE_SIZE,
        verifyStatus: 1,
        pageNo: 1
      },
      tableColumns: [
        {
          title: "序号",
          width: 80,
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: "赛事名称",
          key: "eventsName",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.eventsName,
              params.row.eventsEnglishName
            );
            return h(
              "a",
              {
                on: {
                  click: () => {
                    let self = this;
                    self.$router.push({
                      path:
                        "/game-management/match/" + params.row.eventsId
                    });
                  }
                },
                domProps: { title }
              },
              title
            );
          }
        },
        {
          title: "赛事类型",
          key: "kindCode",
          render: (h, params) => {
            return h(dictSpan, {
              props: { code: "ZGX_SSDJ", value: params.row.kindCode }
            });
          }
        },
        {
          title: "赛事级别",
          key: "gradeCode",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode:params.row.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "提交时间",
          key: "submissionTime",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getTime(params.row.submissionTime);
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "赛事计划",
          key: "planField",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#FF9933"
                }
              },
              (params.row.planField || 0) + "场"
            );
          }
        },
        {
          title: "赛事安排",
          key: "planArrange",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "green"
                }
              },
              (params.row.planArrange || 0) + "场"
            );
          }
        },
        {
          title: "创建者",
          key: "createBy",
          render: (h, params) => {
            let self = this;
            return h("span", params.row.createBy);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 270,
          render: (h, params) => {
            let self = this;
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      self.$router.push({
                        path: `/game-apply-management/edit/${
                          params.row.applyId
                        }`
                      });
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => this.reviewModal(params.row.verifyId)
                  }
                },
                "通过"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => this.rejectModal(params.row.verifyId)
                  }
                },
                "驳回"
              )
            ]);
          }
        }
      ],
      tableData: [],
      model: {},
      rules: {
        verifyReason: [{ required: true, message: "请选择" }],
        verifyExplain: [
          {
            max: this.$config.TAREA_SIZE,
            message: `最多输入${this.$config.TAREA_SIZE}个字符`
          }
        ]
      }
    };
  },
  mounted() {
    let self = this;
    self.fetchListStart();
  },
  methods: {
    // 获取字典数据
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      let self = this;
      self.page = { ...self.page, ...self.pageModel, pageNo: 1 };
      self.fetchList();
    },
    fetchList() {
      this.loading = true;
      api
        .queryList(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      this.fetchListStart();
    },
    // 审核通过 弹框
    reviewModal(verifyId) {
      let self = this;
      self.reviewVisible = true;
      self.model = { verifyId, verifyStatus: 2 };
    },
    // 驳回 弹框
    rejectModal(verifyId) {
      let self = this;
      self.rejectVisible = true;
      self.model.verifyId = verifyId;
      self.model.verifyStatus = 3;
    },
    // 审核通过
    review() {
      let self = this;
      api
        .verify(self.model)
        .then(flag => {
          if (flag) {
            self.fetchListStart();
          }
          self.reviewVisible = false;
        })
        .catch(error => {
          self.reviewVisible = false;
        });
    },
    // 驳回
    reject() {
      let self = this;
      api
        .verify(self.model)
        .then(flag => {
          if (flag) {
            self.fetchListStart();
          }
          self.cancel();
        })
        .catch(error => {
          self.cancel();
        });
    },
    // 驳回 取消
    cancel() {
      let self = this;
      self.$refs["model"].resetFields();
      self.rejectVisible = false;
    }
  }
};
</script>

<style scoped>
</style>
